<template>
    <div>
        <el-table
            :data="tableData"
            stripe
            border
            style="width: 100%">


            <el-table-column
            prop="kehu.kehu_id"
            label="客户id"
            width="">
            </el-table-column>
            
            <el-table-column
            prop="kehu.kehu_name"
            label="客户名称"
            width="">
            </el-table-column>

            <el-table-column
            prop="kehu.contact"
            label="联系人"
            width="160">
            </el-table-column>
            
            <el-table-column
            prop="kehu.tel"
            label="电话"
            width="160">
            </el-table-column>

            <el-table-column
            prop="kehu.email"
            label="邮箱"
            width="300">
            </el-table-column>

            <el-table-column
            prop="create"
            label="申请时间"
            width="180">
            </el-table-column>

            <el-table-column
            label="操作"
            width="100">
            <template slot-scope="scope">
                <el-button @click="showComplete(scope.row)"  type="text" size="small">完成</el-button>
            </template>
            </el-table-column>
        </el-table>

    </div>
</template>
<script>
export default {
    name: 'customer',
    data () {
        return {
            applyDialogVisable: false,
            tableData: [],
            totalCount: 0,
            curIndex: 1,
            addPeopleForm: {
                id:'',
                kehu_id: '',
                kehu_name: '',
                contact: '',
                tel: '',
                email: '',
                account: {
                    id:'',
                    username: ''
                }
            },
        }
    },
    mounted () {
        this.getData();
    },
    methods: {
        openDetails(row){
            // row, event, column 三个参数
            this.$router.push({
                path: 'customerDetail',
                query: {
                    id: row.id
                }
            })
        },
        getData () {
            this.$axios.get('/api/orders/').then(res => {
              console.log()
                if (res.status === 200 && res.data.length > 0) {
                    this.tableData = res.data;
                }else{
                    this.tableData = [];
                }
            }).catch((error)=>{
                console.log(error);
                console.log('查无资源');
                this.tableData = [];
            })
        },
        showComplete(row){
          this.$confirm('确认已经和客户取得联系并关闭, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$axios.delete(`/api/orders/${row.id}/`)
                .then((res)=>{
                    if(res.status === 204){
                        this.$message({
                            type: 'success',
                            message: '操作成功!'
                        });
                    }
                    this.getData();
                }).catch((error)=>{
                    console.log(error);
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消操作'
                });
            })

        }
    },
}
</script>
<style scoped lang="scss">
.rightWay {
    float: right;
}
.rightMargin {
    margin-right: 50px;
}
.topMsg {
    margin-bottom: 10px;
}
</style>


